﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>Treeview - Ace Admin</title>

	<meta name="description" content="with selectable elements and custom icons">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

	<!-- bootstrap & fontawesome -->
	<link rel="stylesheet" href="./common/bootstrap.min.css">
	<link rel="stylesheet" href="./common/font-awesome.min.css">

	<!-- page specific plugin styles -->
	<!-- text fonts -->
	<link rel="stylesheet" href="./common/fonts.googleapis.com.css">

	<!-- ace styles -->
	<link rel="stylesheet" href="./common/ace.min.css" class="ace-main-stylesheet" id="main-ace-style">

	<!--[if lte IE 9]>
		<link rel="stylesheet" href="assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
	<![endif]-->
	<link rel="stylesheet" href="./common/ace-skins.min.css">
	<link rel="stylesheet" href="./common/ace-rtl.min.css">

	<!--[if lte IE 9]>
	  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
	<![endif]-->
	<!-- inline styles related to this page -->
	<!-- ace settings handler -->
	<script async="" src="./common/analytics.js"></script>
	<script type="text/javascript" async="" src="./common/watch.js"></script>
	<script src="./common/ace-extra.min.js"></script>

	<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
	<!--[if lte IE 8]>
	<script src="assets/js/html5shiv.min.js"></script>
	<script src="assets/js/respond.min.js"></script>
	<![endif]-->
</head>

<body class="no-skin">
	<div id="navbar" class="navbar navbar-default ace-save-state">
		<div class="navbar-container ace-save-state" id="navbar-container">
			<button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
				<span class="sr-only">Toggle sidebar</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>

			<div class="navbar-header pull-left">
				<a href="http://ace.jeka.by/index.html" class="navbar-brand">
					<small>
						<i class="fa fa-leaf"></i>
						Ace Admin
					</small>
				</a>
			</div>

			<div class="navbar-buttons navbar-header pull-right" role="navigation">
				<ul class="nav ace-nav">
					<li class="grey dropdown-modal">
						<a data-toggle="dropdown" class="dropdown-toggle" href="http://ace.jeka.by/treeview.html#">
							<i class="ace-icon fa fa-tasks"></i>
							<span class="badge badge-grey">4</span>
						</a>

						<ul class="dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
							<li class="dropdown-header">
								<i class="ace-icon fa fa-check"></i>
								4 Tasks to complete
							</li>

							<li class="dropdown-content ace-scroll" style="position: relative;">
								<div class="scroll-track" style="display: none;"><div class="scroll-bar"></div></div><div class="scroll-content" style="max-height: 200px;">
									<ul class="dropdown-menu dropdown-navbar">
										<li>
											<a href="http://ace.jeka.by/treeview.html#">
												<div class="clearfix">
													<span class="pull-left">Software Update</span>
													<span class="pull-right">65%</span>
												</div>

												<div class="progress progress-mini">
													<div style="width:65%" class="progress-bar"></div>
												</div>
											</a>
										</li>

										<li>
											<a href="http://ace.jeka.by/treeview.html#">
												<div class="clearfix">
													<span class="pull-left">Hardware Upgrade</span>
													<span class="pull-right">35%</span>
												</div>

												<div class="progress progress-mini">
													<div style="width:35%" class="progress-bar progress-bar-danger"></div>
												</div>
											</a>
										</li>

										<li>
											<a href="http://ace.jeka.by/treeview.html#">
												<div class="clearfix">
													<span class="pull-left">Unit Testing</span>
													<span class="pull-right">15%</span>
												</div>

												<div class="progress progress-mini">
													<div style="width:15%" class="progress-bar progress-bar-warning"></div>
												</div>
											</a>
										</li>

										<li>
											<a href="http://ace.jeka.by/treeview.html#">
												<div class="clearfix">
													<span class="pull-left">Bug Fixes</span>
													<span class="pull-right">90%</span>
												</div>

												<div class="progress progress-mini progress-striped active">
													<div style="width:90%" class="progress-bar progress-bar-success"></div>
												</div>
											</a>
										</li>
									</ul>
								</div>
							</li>

							<li class="dropdown-footer">
								<a href="http://ace.jeka.by/treeview.html#">
									See tasks with details
									<i class="ace-icon fa fa-arrow-right"></i>
								</a>
							</li>
						</ul>
					</li>

					<li class="purple dropdown-modal">
						<a data-toggle="dropdown" class="dropdown-toggle" href="http://ace.jeka.by/treeview.html#">
							<i class="ace-icon fa fa-bell icon-animated-bell"></i>
							<span class="badge badge-important">8</span>
						</a>

						<ul class="dropdown-menu-right dropdown-navbar navbar-pink dropdown-menu dropdown-caret dropdown-close">
							<li class="dropdown-header">
								<i class="ace-icon fa fa-exclamation-triangle"></i>
								8 Notifications
							</li>

							<li class="dropdown-content ace-scroll" style="position: relative;">
								<div class="scroll-track" style="display: none;"><div class="scroll-bar"></div></div><div class="scroll-content" style="max-height: 200px;">
									<ul class="dropdown-menu dropdown-navbar navbar-pink">
										<li>
											<a href="http://ace.jeka.by/treeview.html#">
												<div class="clearfix">
													<span class="pull-left">
														<i class="btn btn-xs no-hover btn-pink fa fa-comment"></i>
														New Comments
													</span>
													<span class="pull-right badge badge-info">+12</span>
												</div>
											</a>
										</li>

										<li>
											<a href="http://ace.jeka.by/treeview.html#">
												<i class="btn btn-xs btn-primary fa fa-user"></i>
												Bob just signed up as an editor ...
											</a>
										</li>

										<li>
											<a href="http://ace.jeka.by/treeview.html#">
												<div class="clearfix">
													<span class="pull-left">
														<i class="btn btn-xs no-hover btn-success fa fa-shopping-cart"></i>
														New Orders
													</span>
													<span class="pull-right badge badge-success">+8</span>
												</div>
											</a>
										</li>

										<li>
											<a href="http://ace.jeka.by/treeview.html#">
												<div class="clearfix">
													<span class="pull-left">
														<i class="btn btn-xs no-hover btn-info fa fa-twitter"></i>
														Followers
													</span>
													<span class="pull-right badge badge-info">+11</span>
												</div>
											</a>
										</li>
									</ul>
								</div>
							</li>

							<li class="dropdown-footer">
								<a href="http://ace.jeka.by/treeview.html#">
									See all notifications
									<i class="ace-icon fa fa-arrow-right"></i>
								</a>
							</li>
						</ul>
					</li>

					<li class="green dropdown-modal">
						<a data-toggle="dropdown" class="dropdown-toggle" href="http://ace.jeka.by/treeview.html#">
							<i class="ace-icon fa fa-envelope icon-animated-vertical"></i>
							<span class="badge badge-success">5</span>
						</a>

						<ul class="dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
							<li class="dropdown-header">
								<i class="ace-icon fa fa-envelope-o"></i>
								5 Messages
							</li>

							<li class="dropdown-content ace-scroll" style="position: relative;">
								<div class="scroll-track" style="display: none;"><div class="scroll-bar"></div></div><div class="scroll-content" style="max-height: 200px;">
									<ul class="dropdown-menu dropdown-navbar">
										<li>
											<a href="http://ace.jeka.by/treeview.html#" class="clearfix">
												<img src="./common/avatar.png" class="msg-photo" alt="Alex&#39;s Avatar">
												<span class="msg-body">
													<span class="msg-title">
														<span class="blue">Alex:</span>
														Ciao sociis natoque penatibus et auctor ...
													</span>

													<span class="msg-time">
														<i class="ace-icon fa fa-clock-o"></i>
														<span>a moment ago</span>
													</span>
												</span>
											</a>
										</li>

										<li>
											<a href="http://ace.jeka.by/treeview.html#" class="clearfix">
												<img src="./common/avatar3.png" class="msg-photo" alt="Susan&#39;s Avatar">
												<span class="msg-body">
													<span class="msg-title">
														<span class="blue">Susan:</span>
														Vestibulum id ligula porta felis euismod ...
													</span>

													<span class="msg-time">
														<i class="ace-icon fa fa-clock-o"></i>
														<span>20 minutes ago</span>
													</span>
												</span>
											</a>
										</li>

										<li>
											<a href="http://ace.jeka.by/treeview.html#" class="clearfix">
												<img src="./common/avatar4.png" class="msg-photo" alt="Bob&#39;s Avatar">
												<span class="msg-body">
													<span class="msg-title">
														<span class="blue">Bob:</span>
														Nullam quis risus eget urna mollis ornare ...
													</span>

													<span class="msg-time">
														<i class="ace-icon fa fa-clock-o"></i>
														<span>3:15 pm</span>
													</span>
												</span>
											</a>
										</li>

										<li>
											<a href="http://ace.jeka.by/treeview.html#" class="clearfix">
												<img src="./common/avatar2.png" class="msg-photo" alt="Kate&#39;s Avatar">
												<span class="msg-body">
													<span class="msg-title">
														<span class="blue">Kate:</span>
														Ciao sociis natoque eget urna mollis ornare ...
													</span>

													<span class="msg-time">
														<i class="ace-icon fa fa-clock-o"></i>
														<span>1:33 pm</span>
													</span>
												</span>
											</a>
										</li>

										<li>
											<a href="http://ace.jeka.by/treeview.html#" class="clearfix">
												<img src="./common/avatar5.png" class="msg-photo" alt="Fred&#39;s Avatar">
												<span class="msg-body">
													<span class="msg-title">
														<span class="blue">Fred:</span>
														Vestibulum id penatibus et auctor  ...
													</span>

													<span class="msg-time">
														<i class="ace-icon fa fa-clock-o"></i>
														<span>10:09 am</span>
													</span>
												</span>
											</a>
										</li>
									</ul>
								</div>
							</li>

							<li class="dropdown-footer">
								<a href="http://ace.jeka.by/inbox.html">
									See all messages
									<i class="ace-icon fa fa-arrow-right"></i>
								</a>
							</li>
						</ul>
					</li>

					<li class="light-blue dropdown-modal">
						<a data-toggle="dropdown" href="http://ace.jeka.by/treeview.html#" class="dropdown-toggle">
							<img class="nav-user-photo" src="./common/user.jpg" alt="Jason&#39;s Photo">
							<span class="user-info">
								<small>Welcome,</small>
								Jason
							</span>

							<i class="ace-icon fa fa-caret-down"></i>
						</a>

						<ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
							<li>
								<a href="http://ace.jeka.by/treeview.html#">
									<i class="ace-icon fa fa-cog"></i>
									Settings
								</a>
							</li>

							<li>
								<a href="http://ace.jeka.by/profile.html">
									<i class="ace-icon fa fa-user"></i>
									Profile
								</a>
							</li>

							<li class="divider"></li>

							<li>
								<a href="http://ace.jeka.by/treeview.html#">
									<i class="ace-icon fa fa-power-off"></i>
									Logout
								</a>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</div><!-- /.navbar-container -->
	</div>

	<div class="main-container ace-save-state" id="main-container">
		<script type="text/javascript">
			try { ace.settings.loadState('main-container') } catch (e) { }
		</script>

		<div id="sidebar" class="sidebar                  responsive                    ace-save-state" data-sidebar="true" data-sidebar-scroll="true" data-sidebar-hover="true">
			<script type="text/javascript">
				try { ace.settings.loadState('sidebar') } catch (e) { }
			</script>

			<div class="sidebar-shortcuts" id="sidebar-shortcuts">
				<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
					<button class="btn btn-success">
						<i class="ace-icon fa fa-signal"></i>
					</button>

					<button class="btn btn-info">
						<i class="ace-icon fa fa-pencil"></i>
					</button>

					<button class="btn btn-warning">
						<i class="ace-icon fa fa-users"></i>
					</button>

					<button class="btn btn-danger">
						<i class="ace-icon fa fa-cogs"></i>
					</button>
				</div>

				<div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
					<span class="btn btn-success"></span>

					<span class="btn btn-info"></span>

					<span class="btn btn-warning"></span>

					<span class="btn btn-danger"></span>
				</div>
			</div><!-- /.sidebar-shortcuts -->

			<ul class="nav nav-list" style="top: 0px;">
				<li class="">
					<a href="http://ace.jeka.by/index.html">
						<i class="menu-icon fa fa-tachometer"></i>
						<span class="menu-text"> Dashboard </span>
					</a>

					<b class="arrow"></b>
				</li>

				<li class="active open">
					<a href="http://ace.jeka.by/treeview.html#" class="dropdown-toggle">
						<i class="menu-icon fa fa-desktop"></i>
						<span class="menu-text">
							UI &amp; Elements
						</span>

						<b class="arrow fa fa-angle-down"></b>
					</a>

					<b class="arrow"></b>

					<ul class="submenu">
						<li class="">
							<a href="http://ace.jeka.by/treeview.html#" class="dropdown-toggle">
								<i class="menu-icon fa fa-caret-right"></i>

								Layouts
								<b class="arrow fa fa-angle-down"></b>
							</a>

							<b class="arrow"></b>

							<ul class="submenu">
								<li class="">
									<a href="http://ace.jeka.by/top-menu.html">
										<i class="menu-icon fa fa-caret-right"></i>
										Top Menu
									</a>

									<b class="arrow"></b>
								</li>

								<li class="">
									<a href="http://ace.jeka.by/two-menu-1.html">
										<i class="menu-icon fa fa-caret-right"></i>
										Two Menus 1
									</a>

									<b class="arrow"></b>
								</li>

								<li class="">
									<a href="http://ace.jeka.by/two-menu-2.html">
										<i class="menu-icon fa fa-caret-right"></i>
										Two Menus 2
									</a>

									<b class="arrow"></b>
								</li>

								<li class="">
									<a href="http://ace.jeka.by/mobile-menu-1.html">
										<i class="menu-icon fa fa-caret-right"></i>
										Default Mobile Menu
									</a>

									<b class="arrow"></b>
								</li>

								<li class="">
									<a href="http://ace.jeka.by/mobile-menu-2.html">
										<i class="menu-icon fa fa-caret-right"></i>
										Mobile Menu 2
									</a>

									<b class="arrow"></b>
								</li>

								<li class="">
									<a href="http://ace.jeka.by/mobile-menu-3.html">
										<i class="menu-icon fa fa-caret-right"></i>
										Mobile Menu 3
									</a>

									<b class="arrow"></b>
								</li>
							</ul>
						</li>

						<li class="">
							<a href="http://ace.jeka.by/typography.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Typography
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="http://ace.jeka.by/elements.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Elements
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="http://ace.jeka.by/buttons.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Buttons &amp; Icons
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="http://ace.jeka.by/content-slider.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Content Sliders
							</a>

							<b class="arrow"></b>
						</li>

						<li class="active">
							<a href="http://ace.jeka.by/treeview.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Treeview
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="http://ace.jeka.by/jquery-ui.html">
								<i class="menu-icon fa fa-caret-right"></i>
								jQuery UI
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="http://ace.jeka.by/nestable-list.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Nestable Lists
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="http://ace.jeka.by/treeview.html#" class="dropdown-toggle">
								<i class="menu-icon fa fa-caret-right"></i>

								Three Level Menu
								<b class="arrow fa fa-angle-down"></b>
							</a>

							<b class="arrow"></b>

							<ul class="submenu">
								<li class="">
									<a href="http://ace.jeka.by/treeview.html#">
										<i class="menu-icon fa fa-leaf green"></i>
										Item #1
									</a>

									<b class="arrow"></b>
								</li>

								<li class="">
									<a href="http://ace.jeka.by/treeview.html#" class="dropdown-toggle">
										<i class="menu-icon fa fa-pencil orange"></i>

										4th level
										<b class="arrow fa fa-angle-down"></b>
									</a>

									<b class="arrow"></b>

									<ul class="submenu">
										<li class="">
											<a href="http://ace.jeka.by/treeview.html#">
												<i class="menu-icon fa fa-plus purple"></i>
												Add Product
											</a>

											<b class="arrow"></b>
										</li>

										<li class="">
											<a href="http://ace.jeka.by/treeview.html#">
												<i class="menu-icon fa fa-eye pink"></i>
												View Products
											</a>

											<b class="arrow"></b>
										</li>
									</ul>
								</li>
							</ul>
						</li>
					</ul>
				</li>

				<li class="">
					<a href="http://ace.jeka.by/treeview.html#" class="dropdown-toggle">
						<i class="menu-icon fa fa-list"></i>
						<span class="menu-text"> Tables </span>

						<b class="arrow fa fa-angle-down"></b>
					</a>

					<b class="arrow"></b>

					<ul class="submenu">
						<li class="">
							<a href="http://ace.jeka.by/tables.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Simple &amp; Dynamic
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="http://ace.jeka.by/jqgrid.html">
								<i class="menu-icon fa fa-caret-right"></i>
								jqGrid plugin
							</a>

							<b class="arrow"></b>
						</li>
					</ul>
				</li>

				<li class="">
					<a href="http://ace.jeka.by/treeview.html#" class="dropdown-toggle">
						<i class="menu-icon fa fa-pencil-square-o"></i>
						<span class="menu-text"> Forms </span>

						<b class="arrow fa fa-angle-down"></b>
					</a>

					<b class="arrow"></b>

					<ul class="submenu">
						<li class="">
							<a href="http://ace.jeka.by/form-elements.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Form Elements
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="http://ace.jeka.by/form-elements-2.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Form Elements 2
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="http://ace.jeka.by/form-wizard.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Wizard &amp; Validation
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="http://ace.jeka.by/wysiwyg.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Wysiwyg &amp; Markdown
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="http://ace.jeka.by/dropzone.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Dropzone File Upload
							</a>

							<b class="arrow"></b>
						</li>
					</ul>
				</li>

				<li class="">
					<a href="http://ace.jeka.by/widgets.html">
						<i class="menu-icon fa fa-list-alt"></i>
						<span class="menu-text"> Widgets </span>
					</a>

					<b class="arrow"></b>
				</li>

				<li class="">
					<a href="http://ace.jeka.by/calendar.html">
						<i class="menu-icon fa fa-calendar"></i>

						<span class="menu-text">
							Calendar

							<span class="badge badge-transparent tooltip-error" title="" data-original-title="2 Important Events">
								<i class="ace-icon fa fa-exclamation-triangle red bigger-130"></i>
							</span>
						</span>
					</a>

					<b class="arrow"></b>
				</li>

				<li class="">
					<a href="http://ace.jeka.by/gallery.html">
						<i class="menu-icon fa fa-picture-o"></i>
						<span class="menu-text"> Gallery </span>
					</a>

					<b class="arrow"></b>
				</li>

				<li class="">
					<a href="http://ace.jeka.by/treeview.html#" class="dropdown-toggle">
						<i class="menu-icon fa fa-tag"></i>
						<span class="menu-text"> More Pages </span>

						<b class="arrow fa fa-angle-down"></b>
					</a>

					<b class="arrow"></b>

					<ul class="submenu">
						<li class="">
							<a href="http://ace.jeka.by/profile.html">
								<i class="menu-icon fa fa-caret-right"></i>
								User Profile
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="http://ace.jeka.by/inbox.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Inbox
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="http://ace.jeka.by/pricing.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Pricing Tables
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="http://ace.jeka.by/invoice.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Invoice
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="http://ace.jeka.by/timeline.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Timeline
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="http://ace.jeka.by/search.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Search Results
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="http://ace.jeka.by/email.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Email Templates
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="http://ace.jeka.by/login.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Login &amp; Register
							</a>

							<b class="arrow"></b>
						</li>
					</ul>
				</li>

				<li class="">
					<a href="http://ace.jeka.by/treeview.html#" class="dropdown-toggle">
						<i class="menu-icon fa fa-file-o"></i>

						<span class="menu-text">
							Other Pages

							<span class="badge badge-primary">5</span>
						</span>

						<b class="arrow fa fa-angle-down"></b>
					</a>

					<b class="arrow"></b>

					<ul class="submenu">
						<li class="">
							<a href="http://ace.jeka.by/faq.html">
								<i class="menu-icon fa fa-caret-right"></i>
								FAQ
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="http://ace.jeka.by/error-404.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Error 404
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="http://ace.jeka.by/error-500.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Error 500
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="http://ace.jeka.by/grid.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Grid
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="http://ace.jeka.by/blank.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Blank Page
							</a>

							<b class="arrow"></b>
						</li>
					</ul>
				</li>
			</ul><!-- /.nav-list -->

			<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
				<i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
			</div>
		</div>

		<div class="main-content">
			<div class="main-content-inner">
				<div class="breadcrumbs ace-save-state" id="breadcrumbs">
					<ul class="breadcrumb">
						<li>
							<i class="ace-icon fa fa-home home-icon"></i>
							<a href="http://ace.jeka.by/treeview.html#">Home</a>
						</li>

						<li>
							<a href="http://ace.jeka.by/treeview.html#">UI &amp; Elements</a>
						</li>
						<li class="active">Treeview</li>
					</ul><!-- /.breadcrumb -->

					<div class="nav-search" id="nav-search">
						<form class="form-search">
							<span class="input-icon">
								<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off">
								<i class="ace-icon fa fa-search nav-search-icon"></i>
							</span>
						</form>
					</div><!-- /.nav-search -->
				</div>

				<div class="page-content">
					<div class="ace-settings-container" id="ace-settings-container">
						<div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
							<i class="ace-icon fa fa-cog bigger-130"></i>
						</div>

						<div class="ace-settings-box clearfix" id="ace-settings-box">
							<div class="pull-left width-50">
								<div class="ace-settings-item">
									<div class="pull-left">
										<select id="skin-colorpicker" class="hide">
											<option data-skin="no-skin" value="#438EB9">#438EB9</option>
											<option data-skin="skin-1" value="#222A2D">#222A2D</option>
											<option data-skin="skin-2" value="#C6487E">#C6487E</option>
											<option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
										</select><div class="dropdown dropdown-colorpicker">		<a data-toggle="dropdown" class="dropdown-toggle"><span class="btn-colorpicker" style="background-color:#438EB9"></span></a><ul class="dropdown-menu dropdown-caret"><li><a class="colorpick-btn selected" style="background-color:#438EB9;" data-color="#438EB9"></a></li><li><a class="colorpick-btn" style="background-color:#222A2D;" data-color="#222A2D"></a></li><li><a class="colorpick-btn" style="background-color:#C6487E;" data-color="#C6487E"></a></li><li><a class="colorpick-btn" style="background-color:#D0D0D0;" data-color="#D0D0D0"></a></li></ul></div>
									</div>
									<span>&nbsp; Choose Skin</span>
								</div>

								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-navbar" autocomplete="off">
									<label class="lbl" for="ace-settings-navbar"> Fixed Navbar</label>
								</div>

								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-sidebar" autocomplete="off">
									<label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label>
								</div>

								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-breadcrumbs" autocomplete="off">
									<label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>
								</div>

								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" autocomplete="off">
									<label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label>
								</div>

								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-add-container" autocomplete="off">
									<label class="lbl" for="ace-settings-add-container">
										Inside
										<b>.container</b>
									</label>
								</div>
							</div><!-- /.pull-left -->

							<div class="pull-left width-50">
								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-hover" autocomplete="off">
									<label class="lbl" for="ace-settings-hover"> Submenu on Hover</label>
								</div>

								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-compact" autocomplete="off">
									<label class="lbl" for="ace-settings-compact"> Compact Sidebar</label>
								</div>

								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-highlight" autocomplete="off">
									<label class="lbl" for="ace-settings-highlight"> Alt. Active Item</label>
								</div>
							</div><!-- /.pull-left -->
						</div><!-- /.ace-settings-box -->
					</div><!-- /.ace-settings-container -->

					<div class="page-header">
						<h1>
							Treeview
							<small>
								<i class="ace-icon fa fa-angle-double-right"></i>
								with selectable elements and custom icons
							</small>
						</h1>
					</div><!-- /.page-header -->

					<div class="row">
						<div class="col-xs-12">
							<!-- PAGE CONTENT BEGINS -->

							<div class="row">
								<div class="col-sm-6">
									<div class="widget-box widget-color-blue2">
										<div class="widget-header">
											<h4 class="widget-title lighter smaller">Choose Categories</h4>
										</div>

										<div class="widget-body">
											<div class="widget-main padding-8">
												<ul id="tree1" class="tree tree-unselectable" role="tree"><li class="tree-branch hide" data-template="treebranch" role="treeitem" aria-expanded="false">								<div class="tree-branch-header">					<span class="tree-branch-name">						<i class="icon-folder ace-icon tree-plus"></i>						<span class="tree-label"></span>					</span>				</div>				<ul class="tree-branch-children" role="group"></ul>				<div class="tree-loader hidden" role="alert"><div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div></div>			</li>			<li class="tree-item hide" data-template="treeitem" role="treeitem">				<span class="tree-item-name">				  <i class="icon-item ace-icon fa fa-times"></i>				  <span class="tree-label"></span>				</span>			</li><li class="tree-branch" role="treeitem" aria-expanded="false">								<div class="tree-branch-header">					<span class="tree-branch-name">						<i class="icon-folder ace-icon tree-plus"></i>						<span class="tree-label">For Sale</span>					</span>				</div>				<ul class="tree-branch-children hidden" role="group"><li class="tree-item" role="treeitem">				<span class="tree-item-name">				  <i class="icon-item ace-icon fa fa-times"></i>				  <span class="tree-label">Appliances</span>				</span>			</li><li class="tree-item" role="treeitem">				<span class="tree-item-name">				  <i class="icon-item ace-icon fa fa-times"></i>				  <span class="tree-label">Arts &amp; Crafts</span>				</span>			</li><li class="tree-item" role="treeitem">				<span class="tree-item-name">				  <i class="icon-item ace-icon fa fa-times"></i>				  <span class="tree-label">Clothing</span>				</span>			</li><li class="tree-item" role="treeitem">				<span class="tree-item-name">				  <i class="icon-item ace-icon fa fa-times"></i>				  <span class="tree-label">Computers</span>				</span>			</li><li class="tree-item" role="treeitem">				<span class="tree-item-name">				  <i class="icon-item ace-icon fa fa-times"></i>				  <span class="tree-label">Jewelry</span>				</span>			</li><li class="tree-item" role="treeitem">				<span class="tree-item-name">				  <i class="icon-item ace-icon fa fa-times"></i>				  <span class="tree-label">Office &amp; Business</span>				</span>			</li><li class="tree-item" role="treeitem">				<span class="tree-item-name">				  <i class="icon-item ace-icon fa fa-times"></i>				  <span class="tree-label">Sports &amp; Fitness</span>				</span>			</li></ul>				<div class="tree-loader hidden" role="alert"><div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div></div>			</li><li class="tree-branch" role="treeitem" aria-expanded="false">								<div class="tree-branch-header">					<span class="tree-branch-name">						<i class="icon-folder ace-icon tree-plus"></i>						<span class="tree-label">Vehicles</span>					</span>				</div>				<ul class="tree-branch-children" role="group"></ul>				<div class="tree-loader hidden" role="alert"><div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div></div>			</li><li class="tree-branch" role="treeitem" aria-expanded="false">								<div class="tree-branch-header">					<span class="tree-branch-name">						<i class="icon-folder ace-icon tree-plus"></i>						<span class="tree-label">Rentals</span>					</span>				</div>				<ul class="tree-branch-children" role="group"></ul>				<div class="tree-loader hidden" role="alert"><div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div></div>			</li><li class="tree-branch" role="treeitem" aria-expanded="false">								<div class="tree-branch-header">					<span class="tree-branch-name">						<i class="icon-folder ace-icon tree-plus"></i>						<span class="tree-label">Real Estate</span>					</span>				</div>				<ul class="tree-branch-children" role="group"></ul>				<div class="tree-loader hidden" role="alert"><div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div></div>			</li><li class="tree-branch tree-open" role="treeitem" aria-expanded="true">								<div class="tree-branch-header">					<span class="tree-branch-name">						<i class="icon-folder ace-icon tree-minus"></i>						<span class="tree-label">Pets</span>					</span>				</div>				<ul class="tree-branch-children" role="group"><li class="tree-item" role="treeitem">				<span class="tree-item-name">				  <i class="icon-item ace-icon fa fa-times"></i>				  <span class="tree-label">Cats</span>				</span>			</li><li class="tree-item" role="treeitem">				<span class="tree-item-name">				  <i class="icon-item ace-icon fa fa-times"></i>				  <span class="tree-label">Dogs</span>				</span>			</li><li class="tree-item tree-selected" role="treeitem">				<span class="tree-item-name">				  <i class="icon-item ace-icon fa fa-check"></i>				  <span class="tree-label">Horses</span>				</span>			</li><li class="tree-item tree-selected" role="treeitem">				<span class="tree-item-name">				  <i class="icon-item ace-icon fa fa-check"></i>				  <span class="tree-label">Reptiles</span>				</span>			</li></ul>				<div class="tree-loader hidden" role="alert"><div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div></div>			</li><li class="tree-item" role="treeitem">				<span class="tree-item-name">				  <i class="icon-item ace-icon fa fa-times"></i>				  <span class="tree-label">Tickets</span>				</span>			</li><li class="tree-item" role="treeitem">				<span class="tree-item-name">				  <i class="icon-item ace-icon fa fa-times"></i>				  <span class="tree-label">Services</span>				</span>			</li><li class="tree-item" role="treeitem">				<span class="tree-item-name">				  <i class="icon-item ace-icon fa fa-times"></i>				  <span class="tree-label">Personals</span>				</span>			</li></ul>
											</div>
										</div>
									</div>
								</div>

								<div class="col-sm-6">
									<div class="widget-box widget-color-green2">
										<div class="widget-header">
											<h4 class="widget-title lighter smaller">
												Browse Files
												<span class="smaller-80">(with selectable folders)</span>
											</h4>
										</div>

										<div class="widget-body">
											<div class="widget-main padding-8">
												<ul id="tree2" class="tree tree-unselectable tree-folder-select" role="tree"><li class="tree-branch hide" data-template="treebranch" role="treeitem" aria-expanded="false">				<i class="icon-caret ace-icon tree-plus"></i>&nbsp;				<div class="tree-branch-header">					<span class="tree-branch-name">						<i class="icon-folder ace-icon fa fa-folder"></i>						<span class="tree-label"></span>					</span>				</div>				<ul class="tree-branch-children" role="group"></ul>				<div class="tree-loader hidden" role="alert"><div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div></div>			</li>			<li class="tree-item hide" data-template="treeitem" role="treeitem">				<span class="tree-item-name">				  				  <span class="tree-label"></span>				</span>			</li><li class="tree-branch tree-open" role="treeitem" aria-expanded="true">				<i class="icon-caret ace-icon tree-minus"></i>&nbsp;				<div class="tree-branch-header">					<span class="tree-branch-name">						<i class="icon-folder red ace-icon fa fa-folder-open"></i>						<span class="tree-label">Pictures</span>					</span>				</div>				<ul class="tree-branch-children" role="group"><li class="tree-branch tree-open" role="treeitem" aria-expanded="true">				<i class="icon-caret ace-icon tree-minus"></i>&nbsp;				<div class="tree-branch-header">					<span class="tree-branch-name">						<i class="icon-folder pink ace-icon fa fa-folder-open"></i>						<span class="tree-label">Wallpapers</span>					</span>				</div>				<ul class="tree-branch-children" role="group"><li class="tree-item" role="treeitem">				<span class="tree-item-name">				  				  <span class="tree-label"><i class="ace-icon fa fa-picture-o green"></i> wallpaper1.jpg</span>				</span>			</li><li class="tree-item" role="treeitem">				<span class="tree-item-name">				  				  <span class="tree-label"><i class="ace-icon fa fa-picture-o green"></i> wallpaper2.jpg</span>				</span>			</li><li class="tree-item" role="treeitem">				<span class="tree-item-name">				  				  <span class="tree-label"><i class="ace-icon fa fa-picture-o green"></i> wallpaper3.jpg</span>				</span>			</li><li class="tree-item" role="treeitem">				<span class="tree-item-name">				  				  <span class="tree-label"><i class="ace-icon fa fa-picture-o green"></i> wallpaper4.jpg</span>				</span>			</li></ul>				<div class="tree-loader hidden" role="alert"><div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div></div>			</li><li class="tree-branch" role="treeitem" aria-expanded="false">				<i class="icon-caret ace-icon tree-plus"></i>&nbsp;				<div class="tree-branch-header">					<span class="tree-branch-name">						<i class="icon-folder ace-icon fa fa-folder pink"></i>						<span class="tree-label">Camera</span>					</span>				</div>				<ul class="tree-branch-children" role="group"></ul>				<div class="tree-loader hidden" role="alert"><div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div></div>			</li></ul>				<div class="tree-loader hidden" role="alert"><div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div></div>			</li><li class="tree-branch" role="treeitem" aria-expanded="false">				<i class="icon-caret ace-icon tree-plus"></i>&nbsp;				<div class="tree-branch-header">					<span class="tree-branch-name">						<i class="icon-folder ace-icon fa fa-folder orange"></i>						<span class="tree-label">Music</span>					</span>				</div>				<ul class="tree-branch-children" role="group"></ul>				<div class="tree-loader hidden" role="alert"><div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div></div>			</li><li class="tree-branch" role="treeitem" aria-expanded="false">				<i class="icon-caret ace-icon tree-plus"></i>&nbsp;				<div class="tree-branch-header">					<span class="tree-branch-name">						<i class="icon-folder ace-icon fa fa-folder blue"></i>						<span class="tree-label">Video</span>					</span>				</div>				<ul class="tree-branch-children" role="group"></ul>				<div class="tree-loader hidden" role="alert"><div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div></div>			</li><li class="tree-branch" role="treeitem" aria-expanded="false">				<i class="icon-caret ace-icon tree-plus"></i>&nbsp;				<div class="tree-branch-header">					<span class="tree-branch-name">						<i class="icon-folder ace-icon fa fa-folder green"></i>						<span class="tree-label">Documents</span>					</span>				</div>				<ul class="tree-branch-children" role="group"></ul>				<div class="tree-loader hidden" role="alert"><div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div></div>			</li><li class="tree-branch" role="treeitem" aria-expanded="false">				<i class="icon-caret ace-icon tree-plus"></i>&nbsp;				<div class="tree-branch-header">					<span class="tree-branch-name">						<i class="icon-folder ace-icon fa fa-folder"></i>						<span class="tree-label">Backup</span>					</span>				</div>				<ul class="tree-branch-children" role="group"></ul>				<div class="tree-loader hidden" role="alert"><div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div></div>			</li><li class="tree-item" role="treeitem">				<span class="tree-item-name">				  				  <span class="tree-label"><i class="ace-icon fa fa-file-text grey"></i> ReadMe.txt</span>				</span>			</li><li class="tree-item" role="treeitem">				<span class="tree-item-name">				  				  <span class="tree-label"><i class="ace-icon fa fa-book blue"></i> Manual.html</span>				</span>			</li></ul>
											</div>
										</div>
									</div>
								</div>
							</div>

							<!-- PAGE CONTENT ENDS -->
						</div><!-- /.col -->
					</div><!-- /.row -->
				</div><!-- /.page-content -->
			</div>
		</div><!-- /.main-content -->

		<div class="footer">
			<div class="footer-inner">
				<div class="footer-content">
					<span class="bigger-120">
						<span class="blue bolder">Ace</span>
						Application © 2013-2014
					</span>

					&nbsp; &nbsp;
					<span class="action-buttons">
						<a href="http://ace.jeka.by/treeview.html#">
							<i class="ace-icon fa fa-twitter-square light-blue bigger-150"></i>
						</a>

						<a href="http://ace.jeka.by/treeview.html#">
							<i class="ace-icon fa fa-facebook-square text-primary bigger-150"></i>
						</a>

						<a href="http://ace.jeka.by/treeview.html#">
							<i class="ace-icon fa fa-rss-square orange bigger-150"></i>
						</a>
					</span>
				</div>
			</div>
		</div>

		<a href="http://ace.jeka.by/treeview.html#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
			<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
		</a>
	</div><!-- /.main-container -->
	<!-- basic scripts -->
	<!--[if !IE]> -->
	<script src="./common/jquery-2.1.4.min.js"></script>

	<!-- <![endif]-->
	<!--[if IE]>
	<script src="assets/js/jquery-1.11.3.min.js"></script>
	<![endif]-->
	<script type="text/javascript">
		if ('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
	</script>
	<script src="./common/bootstrap.min.js"></script>

	<!-- page specific plugin scripts -->
	<script src="./common/tree.min.js"></script>

	<!-- ace scripts -->
	<script src="./common/ace-elements.min.js"></script>
	<script src="./common/ace.min.js"></script>

	<!-- inline scripts related to this page -->
	<script type="text/javascript">
		jQuery(function ($) {
			var sampleData = initiateDemoData();//see below


			$('#tree1').ace_tree({
				dataSource: sampleData['dataSource1'],
				multiSelect: true,
				cacheItems: true,
				'open-icon': 'ace-icon tree-minus',
				'close-icon': 'ace-icon tree-plus',
				'itemSelect': true,
				'folderSelect': false,
				'selected-icon': 'ace-icon fa fa-check',
				'unselected-icon': 'ace-icon fa fa-times',
				loadingHTML: '<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>'
			});

			$('#tree2').ace_tree({
				dataSource: sampleData['dataSource2'],
				loadingHTML: '<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>',
				'open-icon': 'ace-icon fa fa-folder-open',
				'close-icon': 'ace-icon fa fa-folder',
				'itemSelect': true,
				'folderSelect': true,
				'multiSelect': true,
				'selected-icon': null,
				'unselected-icon': null,
				'folder-open-icon': 'ace-icon tree-plus',
				'folder-close-icon': 'ace-icon tree-minus'
			});


			/**
			//Use something like this to reload data
			$('#tree1').find("li:not([data-template])").remove();
			$('#tree1').tree('render');
			*/


			/**
			//please refer to docs for more info
			$('#tree1')
			.on('loaded.fu.tree', function(e) {
			})
			.on('updated.fu.tree', function(e, result) {
			})
			.on('selected.fu.tree', function(e) {
			})
			.on('deselected.fu.tree', function(e) {
			})
			.on('opened.fu.tree', function(e) {
			})
			.on('closed.fu.tree', function(e) {
			});
			*/


			function initiateDemoData() {
				var tree_data = {
					'for-sale': { text: 'For Sale', type: 'folder' },
					'vehicles': { text: 'Vehicles', type: 'folder' },
					'rentals': { text: 'Rentals', type: 'folder' },
					'real-estate': { text: 'Real Estate', type: 'folder' },
					'pets': { text: 'Pets', type: 'folder' },
					'tickets': { text: 'Tickets', type: 'item' },
					'services': { text: 'Services', type: 'item' },
					'personals': { text: 'Personals', type: 'item' }
				}
				tree_data['for-sale']['additionalParameters'] = {
					'children': {
						'appliances': { text: 'Appliances', type: 'item' },
						'arts-crafts': { text: 'Arts & Crafts', type: 'item' },
						'clothing': { text: 'Clothing', type: 'item' },
						'computers': { text: 'Computers', type: 'item' },
						'jewelry': { text: 'Jewelry', type: 'item' },
						'office-business': { text: 'Office & Business', type: 'item' },
						'sports-fitness': { text: 'Sports & Fitness', type: 'item' }
					}
				}
				tree_data['vehicles']['additionalParameters'] = {
					'children': {
						'cars': { text: 'Cars', type: 'folder' },
						'motorcycles': { text: 'Motorcycles', type: 'item' },
						'boats': { text: 'Boats', type: 'item' }
					}
				}
				tree_data['vehicles']['additionalParameters']['children']['cars']['additionalParameters'] = {
					'children': {
						'classics': { text: 'Classics', type: 'item' },
						'convertibles': { text: 'Convertibles', type: 'item' },
						'coupes': { text: 'Coupes', type: 'item' },
						'hatchbacks': { text: 'Hatchbacks', type: 'item' },
						'hybrids': { text: 'Hybrids', type: 'item' },
						'suvs': { text: 'SUVs', type: 'item' },
						'sedans': { text: 'Sedans', type: 'item' },
						'trucks': { text: 'Trucks', type: 'item' }
					}
				}

				tree_data['rentals']['additionalParameters'] = {
					'children': {
						'apartments-rentals': { text: 'Apartments', type: 'item' },
						'office-space-rentals': { text: 'Office Space', type: 'item' },
						'vacation-rentals': { text: 'Vacation Rentals', type: 'item' }
					}
				}
				tree_data['real-estate']['additionalParameters'] = {
					'children': {
						'apartments': { text: 'Apartments', type: 'item' },
						'villas': { text: 'Villas', type: 'item' },
						'plots': { text: 'Plots', type: 'item' }
					}
				}
				tree_data['pets']['additionalParameters'] = {
					'children': {
						'cats': { text: 'Cats', type: 'item' },
						'dogs': { text: 'Dogs', type: 'item' },
						'horses': { text: 'Horses', type: 'item' },
						'reptiles': { text: 'Reptiles', type: 'item' }
					}
				}

				var dataSource1 = function (options, callback) {
					var $data = null
					if (!("text" in options) && !("type" in options)) {
						$data = tree_data;//the root tree
						callback({ data: $data });
						return;
					}
					else if ("type" in options && options.type == "folder") {
						if ("additionalParameters" in options && "children" in options.additionalParameters)
							$data = options.additionalParameters.children || {};
						else $data = {}//no data
					}

					if ($data != null)//this setTimeout is only for mimicking some random delay
						setTimeout(function () { callback({ data: $data }); }, parseInt(Math.random() * 500) + 200);

					//we have used static data here
					//but you can retrieve your data dynamically from a server using ajax call
					//checkout examples/treeview.html and examples/treeview.js for more info
				}




				var tree_data_2 = {
					'pictures': { text: 'Pictures', type: 'folder', 'icon-class': 'red' },
					'music': { text: 'Music', type: 'folder', 'icon-class': 'orange' },
					'video': { text: 'Video', type: 'folder', 'icon-class': 'blue' },
					'documents': { text: 'Documents', type: 'folder', 'icon-class': 'green' },
					'backup': { text: 'Backup', type: 'folder' },
					'readme': { text: '<i class="ace-icon fa fa-file-text grey"></i> ReadMe.txt', type: 'item' },
					'manual': { text: '<i class="ace-icon fa fa-book blue"></i> Manual.html', type: 'item' }
				}
				tree_data_2['music']['additionalParameters'] = {
					'children': [
						{ text: '<i class="ace-icon fa fa-music blue"></i> song1.ogg', type: 'item' },
						{ text: '<i class="ace-icon fa fa-music blue"></i> song2.ogg', type: 'item' },
						{ text: '<i class="ace-icon fa fa-music blue"></i> song3.ogg', type: 'item' },
						{ text: '<i class="ace-icon fa fa-music blue"></i> song4.ogg', type: 'item' },
						{ text: '<i class="ace-icon fa fa-music blue"></i> song5.ogg', type: 'item' }
					]
				}
				tree_data_2['video']['additionalParameters'] = {
					'children': [
						{ text: '<i class="ace-icon fa fa-film blue"></i> movie1.avi', type: 'item' },
						{ text: '<i class="ace-icon fa fa-film blue"></i> movie2.avi', type: 'item' },
						{ text: '<i class="ace-icon fa fa-film blue"></i> movie3.avi', type: 'item' },
						{ text: '<i class="ace-icon fa fa-film blue"></i> movie4.avi', type: 'item' },
						{ text: '<i class="ace-icon fa fa-film blue"></i> movie5.avi', type: 'item' }
					]
				}
				tree_data_2['pictures']['additionalParameters'] = {
					'children': {
						'wallpapers': { text: 'Wallpapers', type: 'folder', 'icon-class': 'pink' },
						'camera': { text: 'Camera', type: 'folder', 'icon-class': 'pink' }
					}
				}
				tree_data_2['pictures']['additionalParameters']['children']['wallpapers']['additionalParameters'] = {
					'children': [
						{ text: '<i class="ace-icon fa fa-picture-o green"></i> wallpaper1.jpg', type: 'item' },
						{ text: '<i class="ace-icon fa fa-picture-o green"></i> wallpaper2.jpg', type: 'item' },
						{ text: '<i class="ace-icon fa fa-picture-o green"></i> wallpaper3.jpg', type: 'item' },
						{ text: '<i class="ace-icon fa fa-picture-o green"></i> wallpaper4.jpg', type: 'item' }
					]
				}
				tree_data_2['pictures']['additionalParameters']['children']['camera']['additionalParameters'] = {
					'children': [
						{ text: '<i class="ace-icon fa fa-picture-o green"></i> photo1.jpg', type: 'item' },
						{ text: '<i class="ace-icon fa fa-picture-o green"></i> photo2.jpg', type: 'item' },
						{ text: '<i class="ace-icon fa fa-picture-o green"></i> photo3.jpg', type: 'item' },
						{ text: '<i class="ace-icon fa fa-picture-o green"></i> photo4.jpg', type: 'item' },
						{ text: '<i class="ace-icon fa fa-picture-o green"></i> photo5.jpg', type: 'item' },
						{ text: '<i class="ace-icon fa fa-picture-o green"></i> photo6.jpg', type: 'item' }
					]
				}


				tree_data_2['documents']['additionalParameters'] = {
					'children': [
						{ text: '<i class="ace-icon fa fa-file-text red"></i> document1.pdf', type: 'item' },
						{ text: '<i class="ace-icon fa fa-file-text grey"></i> document2.doc', type: 'item' },
						{ text: '<i class="ace-icon fa fa-file-text grey"></i> document3.doc', type: 'item' },
						{ text: '<i class="ace-icon fa fa-file-text red"></i> document4.pdf', type: 'item' },
						{ text: '<i class="ace-icon fa fa-file-text grey"></i> document5.doc', type: 'item' }
					]
				}

				tree_data_2['backup']['additionalParameters'] = {
					'children': [
						{ text: '<i class="ace-icon fa fa-archive brown"></i> backup1.zip', type: 'item' },
						{ text: '<i class="ace-icon fa fa-archive brown"></i> backup2.zip', type: 'item' },
						{ text: '<i class="ace-icon fa fa-archive brown"></i> backup3.zip', type: 'item' },
						{ text: '<i class="ace-icon fa fa-archive brown"></i> backup4.zip', type: 'item' }
					]
				}
				var dataSource2 = function (options, callback) {
					var $data = null
					if (!("text" in options) && !("type" in options)) {
						$data = tree_data_2;//the root tree
						callback({ data: $data });
						return;
					}
					else if ("type" in options && options.type == "folder") {
						if ("additionalParameters" in options && "children" in options.additionalParameters)
							$data = options.additionalParameters.children || {};
						else $data = {}//no data
					}

					if ($data != null)//this setTimeout is only for mimicking some random delay
						setTimeout(function () { callback({ data: $data }); }, parseInt(Math.random() * 500) + 200);

					//we have used static data here
					//but you can retrieve your data dynamically from a server using ajax call
					//checkout examples/treeview.html and examples/treeview.js for more info
				}


				return { 'dataSource1': dataSource1, 'dataSource2': dataSource2 }
			}

		});
	</script>
</body>
</html>